<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推荐 22001010525-王婕</title>
    <link rel="stylesheet" href="wang_css/weibo(tuijain).css">
    <script src="./wang_fonts/iconfont.js"></script>
    <link rel="stylesheet" href="wang_css/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="./wang_js/swiper-bundle.min.js"></script>
</head>
<body>
    <header class="wang_header"></header>
    <ul class="top">
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-qiandao"></use>
            </svg>
        </li>
        <li>
            <p onclick="window.location.href='weibo(guanzhu).html'">关注</p>
        </li>
        <li>
            <p>推荐</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hongbao"></use>
            </svg>
            </li>
            <div class="box">
                <div id="content">
                    <ul class="nav">
                        <li>
                            <a href="#">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-jiahao"></use>
                                </svg>
                            <a href=""></a>
                            <ul class="sub - nav hidden">
                                
                                <li>
                                    <a href="#">
                                      <svg class=" icon" aria-hidden="true">
                                      <use xlink:href="#icon-xieboke"></use>
                                    </svg>
                                        <a href="">写微博</a>
                                  </li>
                                <li>
                                    <a href="#">
                                        <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-tupian"></use>
                                      </svg>
                                     
                                      <a href="">相册</a>
                               
                                    </li>
                                <li>
                                    <a href="#">
                                        <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-dianping"></use>
                                      </svg>
                                     
                                      <a href="">点评</a>
                                  
                                    </li>
                                <li>
                                    <a href="#">
                                    <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-LIVE"></use>
                                  </svg>
                                
                                  <a href="">直播</a>
                              
                                   
                                </li>
                         
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
    <div class="huadong">
        <div class="swiper s1">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <p>热门</p>
                </div>
                <div class="swiper-slide">
                    <p>实时</p>
                </div>
                <div class="swiper-slide">
                    <p>同城</p>
                </div>
                <div class="swiper-slide">
                    <p>榜单</p>
                </div>
                <div class="swiper-slide">
                    <p>短剧</p>
                </div>
                <div class="swiper-slide">
                    <p>国际</p>
                </div>
                <div class="swiper-slide">
                    <p>视频</p>
                </div>
                <div class="swiper-slide">
                    <p>明星</p>
                </div>
                <div class="swiper-slide">
                    <p>搞笑</p>
                </div>
                <div class="swiper-slide">
                    <p>情感</p>
                </div>
                <div class="swiper-slide">
                    <p>周末</p>
                </div>
                <div class="swiper-slide">
                    <p>印象</p>
                </div>
                <div class="swiper-slide">
                    <p>精选</p>
                </div>
                <div class="swiper-slide">
                    <p>电影</p>
                </div>
                <div class="swiper-slide">
                    <p>社会</p>
                </div>
                <div class="swiper-slide">
                    <p>电视剧</p>
                </div>
                <div class="swiper-slide">
                    <p>美食</p>
                </div>
                <div class="swiper-slide">
                    <p>读书</p>
                </div>
                <div class="swiper-slide">
                    <p>摄影</p>
            </div>
            <div class="swiper-slide">
                <p>+</p>
        </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</header>
    <nav class="wang_nav"></nav>
    <main class="wang_main"></main>
    
    <main class="wang_main">
     <!-- 微博内容 -->
    <div class="neirong">
        <div class="tuxiang">
             <a href="#">
                <img src="./wang_images/weibo(tuijian)/1.jpg">
            </a>
        <div class="txt">
            <h3>娱乐兔兔子</h3>
            <span class="fujia1">12-10</span>
            <span class="fujia2">来自微博网页版</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
        <div class="tuxiang2">
            <p>终于明白，原来碎花衣服的搭配秘诀是纯色衣服。 </p>
            <img src="./wang_images/weibo(tuijian)/2.jpg">
        </div>
        <div class="kuaijiejian">
            <div class="tuxiang3">
                <img src="./wang_images/weibo(guanzhu)/15.jpg" alt="">
            </div>
            <div class="pinglunsearch">
                <input type="text" name="search" id="search" placeholder=" 友善评论，文明发言">
            </div>
        </div>
        <div class="santubiao">
            <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanfa"></use>
                    </svg>
                <p>2062</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liuyan"></use>
                </svg>
                 <p>791</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-good"></use>
                </svg>
                <p>5498</p>
            </div>
        </div>
    </div>
    <div class="neirong">
        <div class="tuxiang">
             <a href="#">
                <img src="./wang_images/weibo(tuijian)/3.jpg">
            </a>
        <div class="txt">
            <h3>监控人类</h3>
            <span class="fujia2">1219人关注了他</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
        <div class="tuxiang2">
            <p>冷知识：还有1个多月就要跨年了，2024年跟开了
                三倍速一样，我真的觉得今年是最没有参与感的一
                年 </p>
            <img src="./wang_images/weibo(tuijian)/4.jpg">
        </div>
        <div class="kuaijiejian">
            <div class="tuxiang3">
                <img src="./wang_images/weibo(guanzhu)/15.jpg" alt="">
            </div>
            <div class="pinglunsearch">
                <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
            </div>
        </div>
        <div class="santubiao">
            <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanfa"></use>
                    </svg>
                <p>598</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liuyan"></use>
                </svg>
                 <p>149</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-good"></use>
                </svg>
                <p>159</p>
            </div>
        </div>
    </div>
    <div class="neirong">
        <div class="tuxiang">
             <a href="#">
                <img src="./wang_images/weibo(tuijian)/3.jpg">
            </a>
        <div class="txt">
            <h3>监控人类</h3>
            <span class="fujia2">1219人关注了他</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
        <div class="tuxiang2">
            <p>世界上有一个特别棒的人她正在读我这句话</p>
        </div>
        <div class="kuaijiejian">
            <div class="tuxiang3">
                <img src="./wang_images/weibo(guanzhu)/15.jpg" alt="">
            </div>
            <div class="pinglunsearch">
                <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
            </div>
        </div>
        <div class="santubiao">
            <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanfa"></use>
                    </svg>
                <p>55</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liuyan"></use>
                </svg>
                 <p>459</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-good"></use>
                </svg>
                <p>159</p>
            </div>
        </div>
    </div>
    <div class="neirong">
        <div class="tuxiang">
             <a href="#">
                <img src="./wang_images/weibo(tuijian)/3.jpg">
            </a>
        <div class="txt">
            <h3>监控人类</h3>
            <span class="fujia2">1219人关注了他</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
        <div class="tuxiang2">
            <p>有钱可以解决我目前100%的烦恼 </p>
            <img src="./wang_images/weibo(tuijian)/5.jpg" alt="">
        </div>
        <div class="kuaijiejian">
            <div class="tuxiang3">
                <img src="./wang_images/weibo(guanzhu)/15.jpg" alt="">
            </div>
            <div class="pinglunsearch">
                <input type="text" name="search" id="search" placeholder="友善评论，文明发言">
            </div>
        </div>
        <div class="santubiao">
            <div class="sanyang">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhuanfa"></use>
                    </svg>
                <p>55</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liuyan"></use>
                </svg>
                 <p>76</p>
            </div>
            <div class="sanyang">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-good"></use>
                </svg>
                <p>159</p>
            </div>
        </div>
    </div>
</main> 
<section class="wang_ad"></section>
    <footer class="wang_footer"> 
      <!-- 下导航 -->
      <nav class="wang_nav">
        <ul>
            <li>
                <a href="weibo(guanzhu).html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye1"></use>
                    </svg>
                    <p>微博</p>
                </a>
            </li>
            <li>
                <a href="shipin.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shipin"></use>
                    </svg>
                    <p>视频</p>
                </a>
            </li>
            <li>
                <a href="faxian.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo1"></use>
                    </svg>
                    <p>发现</p>
                </a>
            </li>
            <li>
                <a href="xiaoxi.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiaoxi2"></use>
                    </svg>
                    <p>消息</p>
                </a>
            </li>
            <li>
                <a href="wo.html">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wo"></use>
                    </svg>
                    <p>我</p>
                </a>
            </li>
        </ul>
    </nav>
</footer>
    <script>
       var swiper1 = new Swiper(".s1", {
         slidesPerView: 5,
         spaceBetween: 5,
       });
       var swiper2 = new Swiper(".s2", {
         slidesPerView: 5,
         spaceBetween: 5,
       });
   </script>
   <!-- 下拉菜单 -->
   <script>   
    var nav = document.querySelector('.nav');
     var lis = nav.children;
     console.log(nav);
 for (var i = 0; i < lis.length; i++) {
     lis[i].onclick = function() {
         var subNav = this.children[2];
         if (subNav) {
             var iconPlusContainer = this.querySelector('.icon-plus-container');
             if (subNav.style.display === 'none' || subNav.style.display === '') {
                 subNav.style.display = 'block';
                 // 根据加号图标的位置设置下拉菜单的展开位置
                 if (iconPlusContainer) {
                     subNav.style.top = (iconPlusContainer.offsetTop + iconPlusContainer.offsetHeight) + 'px';
                     subNav.style.left = iconPlusContainer.offsetLeft + 'px';
                 } else {
                     // 如果未找到加号图标容器，使用之前的方式设置位置（作为备用）
                     subNav.style.top = (this.offsetTop + this.offsetHeight) + 'px';
                     subNav.style.left = this.offsetLeft + 'px';
                 }
             } else {
                 subNav.style.display = 'none';
             }
         }
     }
 }
 
 // 获取所有下拉菜单
 var subNavs = document.querySelectorAll('.sub-nav');
 // 为整个文档添加点击事件监听器
 document.addEventListener('click', function(event) {
     for (var i = 0; i < subNavs.length; i++) {
         var subNav = subNavs[i];
         if (subNav.style.display === 'block' &&!subNav.contains(event.target)) {
             subNav.style.display = 'none';
         }
     }
 })
     </script>
     
</body>
</html>
